<style lang="less" scoped>
    @import "../../less/_variable.less";

    .header {
        border-bottom: 1px solid #efefef;
    }

    .main_t {
        margin-bottom: 0.16rem;
        padding: 0.38rem 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        background: #fff;

    .main_t_c {
        flex: 1;
        margin-left: 0.25rem;
        color: #0a0e0d;
        font-size: 0.28rem;

        line-height: 1.5;

    span:first-child {
        margin-right: 0.5rem;
    }

    }
    }
    .right_icon {
        float: right;
    }

    .main_c {
        margin-bottom: 0.16rem;
        background: #fff;

    .main_c_t {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        padding: 0.16rem 0 0.22rem 0.32rem;
        font-size: 0.26rem;

        color: #0a0e0d;

    .avatar {
        width: 0.4rem;
        height: 0.4rem;
        background: #f7f7f7;
        margin-right: 0.3rem;

    img {
        width: 100%;
        height: 100%;
    }

    }
    }
    .main_c_c {
        display: flex;
        justify-content: space-between;
        padding: 0.16rem 0.28rem 0.12rem;
        background: #f5f5f5;

    .avatar {
        width: 1.8rem;
        height: 1.8rem;
        background: #fff;
        overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }

    }
    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0.04rem 0 0.04rem 0.2rem;
        font-size: 0.26rem;
        color: #101010;
    }

    }
    }

    .info {

    .info_t {

    span {
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.5;

    }

    p {
        color: #909090;
        margin-top: 0.12rem;
    }

    }
    .amount {
        font-size: 0.3rem;
        color: @c_buttonHoverBgColor;

    }

    }

    .subBtn{
        width: 100%;
        height: 1.06rem;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        position:absolute;
        left:0;
        bottom:0;
        button{
            width: 2.9rem;
            /*background: @c_buttonOkBgColor;*/
            background: #fd8d2c;
            text-align: center;
            line-height: 1.06rem;
            font-size: 0.36rem;
            color: #fff;

        }
        div{
            flex: 1;
            padding-right: 0.3rem;
            font-size: 0.28rem;
            color: #141414;

            display: flex;
            align-items: center;
            justify-content: flex-end;
            .amount{
                font-size: 0.34rem;
                color: @c_buttonHoverBgColor;
            }
            span:last-child{
                color: @c_buttonHoverBgColor;
            }
        }
    }
</style>
<template>
    <div>
        <v-header title="提交订单">
            <div slot="left">
                <div class="back_icon"></div>
            </div>
        </v-header>
        <div class="main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <div class="main_t" v-on:click="gotoPage(1)">
                <div class="position_icon"></div>
                <div class="main_t_c" v-if="!addressList.addreList.content ||  addressList.addreList.content == null||  addressList.addreList.content.length == 0">
                    <span>点击添加收货地址</span>
                </div>
                <div class="main_t_c" v-else>
                    <span>{{addressList.selectAddress.recipientsName}}</span>
                    <span>{{addressList.selectAddress.recipientsMobilePhone}}</span><br>
                    <span>{{addressList.selectAddress.recipientsProvince + addressList.selectAddress.recipientsCity +  addressList.selectAddress.recipientsDistrict + addressList.selectAddress.recipientsDetailAddress }}</span>
                </div>

                <div class="right_icon"></div>
            </div>
            <div class="main_c">
                <div class="main_c_t">
                    <div class="avatar"></div>
                    <p>{{product.supplierName}}</p>
                </div>
                <div class="main_c_c" v-on:click="gotoPage">
                    <div class="avatar">
                        <img :src="product.mainImage" alt="">
                    </div>
                    <div class="info">
                        <div class="info_t">
                            <span>{{product.name}}</span>
                            <p>颜色:标准黑</p>
                        </div>
                        <div class="amount">￥{{product.price}}/件</div>
                    </div>
                </div>
                <div class="main_c_b_s_o">
                    <group>
                        <x-number v-model="buyNumber" title="购买数量" :min="0" :max="product.limitCount" fillable></x-number>
                    </group>
                </div>
            </div>
            <v-payMethod @change="change"></v-payMethod>
            <div class="subBtn">
                <div>
                    <span>实付款&nbsp;</span>
                    <span class="amount">￥{{product.price * buyNumber == 'NAN'?0:product.price * buyNumber}}</span>
                    <span>&nbsp;免运费</span>
                </div>
                <button :class="disabled" :disabled="disabled !== ''" v-on:click="$route.query.orderId?getAcquireOrder():gotoOpenOrder()">立即支付</button>
            </div>
        </div>

    </div>
</template>
<script>
    import {mapActions,mapState} from 'vuex'
    import { openOrder,acquireOrder} from '../../api/home'
    import { queryDeliveriesInfo,displayOrder} from '../../api/my'
    import { GET_ADDRESS,SELECT_ADDRESS} from 'store/address'
    import {UPDATA_INTERACTIVE} from 'store/interactive'
    import {XNumber, Group} from 'vux'
    export default {
        components: {
            XNumber,
            Group
        },

        data() {
            return {
                radioValue: ['1'],// 0 未知 1微信  2支付宝   3银行卡
                product:{
                    price:0
                },
                buyNumber:0,
                recipientsAddress:'上海市 宝山区 永宜大厦',
                disabled:'disabled',
                orderId:'',
                isOpen:0,
            };
        },
        activated:function () {
            this.getProduct();
            if(!this.addressList.addreList.content){
                this.getaddressList();
            }
            if(this.addressList.addreList.content && !this.addressList.selectAddress.recipientsName){
                this.getSelectAddress();
            }

        },
        deactivated(){
            this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "0"}});
        },
        methods:{
            ...mapActions([GET_ADDRESS,SELECT_ADDRESS,UPDATA_INTERACTIVE]),
            //  获取支付方式
            change(value){
                // console.log(value)
                this.radioValue = value
            },
            //获取订单详情
            getProduct(){
                let product = localStorage.getItem('product');
                if(product){
                    this.product = JSON.parse(product);
                    this.buyNumber = JSON.parse(product).buyNumber?JSON.parse(product).buyNumber:'0';
                }
            },
            //开单
            gotoOpenOrder(){
                let obj = {
                    templateId:this.$route.query.templateId,
                    buyNumber:this.buyNumber,
                    recipientsAddress:this.addressList.selectAddress.recipientsProvince + this.addressList.selectAddress.recipientsCity +  this.addressList.selectAddress.recipientsDistrict + this.addressList.selectAddress.recipientsDetailAddress,
                    recipientsPhone:this.addressList.selectAddress.recipientsMobilePhone,
                    recipientsName:this.addressList.selectAddress.recipientsName,
                    payMode:this.radioValue[0]
                }
                let that =this;
                openOrder(obj)
                    .then((res)=>{
                        this.orderId = res.body.content.orderId;
                        this.isOpen = res.body.content.isOpen;
                        let obj = {payInfo:res.body.content.orderString,type:"1"}
                        this.gotopay(obj);
                    })
            },

            //加入团购
            getAcquireOrder(){
                let obj = {
                    orderId:this.$route.query.orderId,
                    buyNumber:this.buyNumber,
                    recipientsAddress:this.addressList.selectAddress.recipientsProvince + this.addressList.selectAddress.recipientsCity +  this.addressList.selectAddress.recipientsDistrict + this.addressList.selectAddress.recipientsDetailAddress,
                    recipientsPhone:this.addressList.selectAddress.recipientsMobilePhone,
                    recipientsName:this.addressList.selectAddress.recipientsName,
                    payMode:this.radioValue[0]
                }
                let that =this;
                acquireOrder(obj)
                    .then((res)=>{
                        let obj = {payInfo:res.body.content,type:"1"};
                        this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "1"}}) //打开轮询开关
                        this.getdisplayOrder();
                        this.gotopay(obj);
                    })
            },
            gotopay(obj){
                if(this.radioValue[0] == 1){  //微信
                    this.Interactive.weChatPay(obj)
                }else if(this.radioValue[0] == 2){ //支付宝
                    this.Interactive.alipayPay(obj)
                }
            },
            paySucc(){
                let that = this;
                that.$vux.toast.text('支付成功', 'middle');
                if(that.isOpen == 1){
                    setTimeout(function (){
                        that.$router.push({
                            path:'/home/buying/result',
                            query:{orderId:that.$route.query.orderId? that.$route.query.orderId : that.orderId,productId:this.product.productId}
                        })
                    },1000)
                }else{
                    setTimeout(function (){
                        that.$router.push({
                            path:'/home/buying/wait',
                            query:{orderId:that.$route.query.orderId? that.$route.query.orderId : that.orderId,productId:this.product.productId}
                        })
                    },1000)
                }
            },
            payErrey(){
                let that = this;
                setTimeout(function () {
                    that.$router.push({
                        path:'/home'
                    })
                },500)

            },
            gotoPage(type){
                if(type == 1){
                    if(this.$route.query.orderId){
                        this.$router.replace({
                            path:'/add/selectAreat',
                            query:{
                                productId:this.$route.query.productId,
                                templateId:this.$route.query.templateId,
                                orderId:this.$route.query.orderId,

                            }
                        })
                    }else{
                        this.$router.replace({
                            path:'/add/selectAreat',
                            query:{
                                productId:this.$route.query.productId,
                                templateId:this.$route.query.templateId,

                            }
                        })
                    }

                }else{
                    this.$router.push({
                        path:'/home/product_details',
                        query:{
                            productId:this.$route.query.productId,
                            templateId:this.$route.query.templateId
                        }
                    })
                }

            },
            //获取收货地址
            getaddressList(){
                queryDeliveriesInfo()
                    .then((res)=>{
                        this.GET_ADDRESS(res.body);
                        this.getSelectAddress()
                    })

            },
            //获取默认收货地址
            getSelectAddress(){
                let that = this;
                let index = 0;
                this.addressList.addreList.content.forEach(function (v,i) {
                    if(v.isDefault !== 0){
                        that.SELECT_ADDRESS(v);
                        index = 1;
                    }
                })
                if(index == 0){
                    this.addressList.addreList.content.forEach(function (v,i) {
                        if(i == 0){
                            that.SELECT_ADDRESS(v);
                        }
                    })
                }
            },
            btnDisabled(){
                if(this.radioValue.length && this.buyNumber && this.addressList.selectAddress.recipientsProvince && this.addressList.selectAddress.recipientsCity && this.addressList.selectAddress.recipientsDistrict && this.addressList.selectAddress.recipientsDetailAddress && this.addressList.selectAddress.recipientsMobilePhone && this.addressList.selectAddress.recipientsName){
                    this.disabled = ''
                }else{
                    this.disabled = 'disabled'
                }
            },

            //获取订单状态
            getdisplayOrder(){

                if(this.interactive.IsClearSetinterval.type == "2"){  //从接口收到了支付状态
                    return;
                }
                let that = this;
                global.myLoad = true;
                displayOrder()
                    .then((res)=>{
                        if (res.body.content.orderStatus == 12) { //状态已查询为已支付
                            that.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "2"}});   //取消轮询获取订单状态
                            that.paySucc();
                        } else {
                            setTimeout(function () {
                                if (that.interactive.IsClearSetinterval.type == "1") {
                                    that.getdisplayOrder()
                                }
                            }, 1000)
                        }
                    })
                    .catch(function () {
                        setTimeout(function () {
                            if (that.interactive.IsClearSetinterval.type == "1") {
                                that.getdisplayOrder()
                            }
                        }, 1000)
                    })
            }


        },
        watch:{
            'interactive.payStatus':function () {
                this.UPDATA_INTERACTIVE({type:'IsClearSetinterval',content:{type:"0"}});
                if(this.interactive.IsClearSetinterval.type == "2"){  //从接口收到了支付状态
                    return;
                }
                if(this.interactive.payStatus.payState == 1 && this.interactive.payStatus.type == 1){
                    this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "2"}});   //取消轮询获取订单状态
                    this.paySucc();
                }else if(this.interactive.payStatus.payState == 0 && this.interactive.payStatus.type == 1){
                    this.payErrey();
                }

            },
            buyNumber:function () {
                this.btnDisabled();
            },
            radioValue:function () {
                this.btnDisabled();
            },
            'addressList.selectAddress':function(){
                this.btnDisabled();
            }


        },
        computed: mapState({addressList:state=>state.address,interactive: state => state.interactive}),
    }
</script>